<template>
    <div class="pageCon">

        <div class="showMapBox">
            <div class="mapBox" id="mapBox">
                <div class="shopItem" :style="{ top: item.top + '%', left: item.left + '%' }"
                    v-for="(item, index) in showShopList" :key="index" @click='checkDetail(index, "shop")'>
                    <van-icon class="posiIcon" v-if="item.shopStatus == 1" color="#C20330" name="location" />
                    <van-icon class="posiIcon" v-if="item.shopStatus == 0" color="#03C295" name="location" />
                    <van-icon class="posiIcon" v-if="item.shopStatus == 2" color="#F6C349" name="location" />
                    <div>
                        {{ item.shopName }}
                    </div>
                    <div class="shopLable">
                        {{ item.shopMainLabel || '' }}
                    </div>
                </div>
            </div>
            <div class="resTip" @click="statusHandle(-2)" v-if="(shopList.length == 0 && resNum == 0) || (resNum != 0)">
                <div>
                    <template v-if='shopList.length == 0 && resNum == 0'>暂无相关门店信息</template>
                    <template v-if='resNum != 0'>还剩余{{ resNum }}家店铺,查看更多></template>
                </div>
            </div>
        </div>

        <!-- 筛选 -->
        <div class="shaiBox shaiBoxHe" @click="showHandle('he')">合</div>
        <div class="shaiBox" @click="showHandle('shai')">筛</div>

        <div class="tipBtn">
            <div @click="statusHandle(1)">
                <van-icon class="posiIcon" color="#C20330" name="location" />
            </div>
            <!-- <div @click="statusHandle(0)">
                <van-icon class="posiIcon" color="#03C295" name="location" />
            </div> -->
            <div @click="statusHandle(2)">
                <van-icon class="posiIcon" color="#F6C349" name="location" />
            </div>
        </div>


        <!-- 投放按钮   导航栏 -->
        <div class="pageBottomBox">
            <!-- 投放 -->
            <div class="handleBox" id="handleBox">
                <div class="touBtn" @click="showHandle('tou')" v-if="userTag != -2">我要投放<van-icon name="plus"
                        class="addIcon" />
                </div>
                <div class="demoBox">
                    <div class="demoItem">
                        <van-icon class="demoIcon" color="#C20330" name="location" />
                        已投放
                    </div>
                    <div class="demoItem">
                        <van-icon class="demoIcon" color="#03C295" name="location" />
                        未投放
                    </div>
                    <div class="demoItem">
                        <van-icon class="demoIcon" color="#F6C349" name="location" />
                        已占用
                    </div>
                </div>
            </div>
            <!-- 导航栏 -->
            <div class="navBox">
                <div>
                    <img src="../../assets/advMobile/navIcon/home2.png" alt="">
                    主页
                </div>
                <div @click="toPage">
                    <img src="../../assets/advMobile/navIcon/geren1.png" alt="">
                    我的
                </div>
            </div>
        </div>

        <!-- 点击  筛    -->
        <div :class="showShaiPop ? 'showBox' : 'hidenBox'" @click="popC">
            <div class="shaiPop" @click.stop="popN">
                <div class="resBtn" @click="resHandle('shai')"> <van-icon name="replay" />重置所有</div>
                <template v-if="showShaiPop">
                    <div class="selectBox" v-for="(item, index) in conditionList" :key="index">
                        <span>{{ item.title }}</span>
                        <div>
                            <span @click="selectItem(index, eIndex, 'shai')" :class="ele.isSelect ? 'selectItem' : ''"
                                v-for="(ele, eIndex) in item.list" :key="eIndex">{{ ele.text }}</span>
                        </div>
                    </div>
                    <div class="selectBtn" v-if="showShaiPop" @click="submitHandle('shai')">
                        <div>筛选</div>
                    </div>
                </template>
            </div>
        </div>

        <!-- 投放 -->
        <div :class="sheetDia ? 'touBox' : 'hidenTouBox'" @click="popTou">
            <div :class="touFlag == 1 || touFlag == 2 || touFlag == 5 || touFlag == 6 ? 'resultCon touCon' : 'touCon'"
                @click.stop="popN">
                <div class="touTop">
                    <span v-if="touFlag == 0">请选择目标信息</span>
                    <span v-else-if="touFlag == 1">我要投放</span>
                    <span v-else-if="touFlag == 2">填写基本信息</span>
                    <span v-else-if="touFlag == 3">提交成功</span>
                    <span v-else-if="touFlag == 5">店铺列表</span>
                    <span v-else-if="touFlag == 6">店铺详情</span>
                    <span v-else-if="touFlag == 7">合作列表</span>
                    <van-icon name="cross" @click="popTou" class="closeIcon"></van-icon>
                </div>

                <!-- 筛选目标条件 -->
                <div class="touConBox" v-show="touFlag == 0">
                    <div class="leftBox">
                        <div @click="onClickNav(index)" :class="currentIndex == index ? 'activeNav' : ''"
                            v-for="(item, index) in conditionList" :key="index">
                            {{ item.title }}
                        </div>
                    </div>

                    <div class="rightBox" id="rightBox">
                        <div ref="shopContant">
                            <div class="selectBox eventList" v-for="(item, index) in conditionList   " :key="index"
                                :id="item.id">
                                <span>{{ item.title }}</span>
                                <div>
                                    <span @click="selectItem(index, eIndex, 'touList')"
                                        :class="ele.isSelect ? 'selectItem' : ''" v-for="(ele, eIndex) in item.list"
                                        :key="eIndex">{{ ele.text }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 筛选结果 -->
                <div class="resBox" v-show="touFlag == 1">
                    <div class="resTop">
                        <div>
                            <span>根据您的需求，本次筛选</span>
                            <div><img src="../../assets/advMobile/shopDetail/shopName.png" alt="">共计店铺</div>
                            <span>{{ shopList.length }}家</span>
                        </div>
                    </div>
                    <div class="shaiTabBox">
                        <div class="shaiTabTop">
                            <div>序号</div>
                            <div>店铺名称</div>
                            <div>区域</div>
                            <div>位置</div>
                            <div>操作</div>
                        </div>

                        <template v-if="shopList.length != 0">
                            <div class="shaiTabMain" v-for="( item, index ) in  shopList " :key="index">
                                <div>{{ index + 1 }}</div>
                                <div>{{ item.shopName }}</div>
                                <div>{{ item.shopRegion | getRegion }}</div>
                                <div>{{ item.shopAddr }}</div>
                                <div @click="checkDetail(index, 'shopList', touFlag)">详情</div>
                            </div>
                        </template>
                        <div v-else class="emptyBox">
                            <img src="../../assets/empty.png" alt="">
                        </div>
                    </div>
                </div>

                <!-- 表单信息 -->
                <div class="infoBox" id="infoBox" v-show="touFlag == 2">
                    <div class="infoTop">
                        <div>基本信息</div>
                        <div>
                            <div>
                                <img src="../../assets/advMobile/info/send.png" alt="">
                                联系人
                            </div>
                            <input type="text" v-model="userInfo.userName" placeholder="请填写">
                        </div>
                        <div>
                            <div>
                                <img src="../../assets/advMobile/info/notice.png" alt="">
                                电话
                            </div>
                            <input type="number" v-model="userInfo.userTel" placeholder="请填写">
                        </div>
                        <div>
                            <div>
                                <img src="../../assets/advMobile/info/send.png" alt="">
                                预算
                            </div>
                            <input type="number" v-model="userInfo.userMoney" placeholder="请填写">
                        </div>
                        <div>
                            <div>
                                <img src="../../assets/advMobile/info/send.png" alt="">
                                投放时间
                            </div>
                            <input v-model="userInfo.timeStr" readonly @click="showCalendar = true" placeholder="请选择">
                        </div>
                    </div>
                    <div class="advCon">
                        <div>
                            <img src="../../assets/advMobile/info/edit.png" alt="">
                            广告内容
                        </div>
                        <textarea @focus="textInputFocus" v-model="userInfo.content"
                            placeholder="请简单介绍您投放广告内容"></textarea>
                    </div>
                </div>

                <!-- 提交成功 -->
                <div class="successBox" v-show="touFlag == 3">
                    <div>
                        <img src="../../assets/advMobile/successImg.png" alt="">
                        <span>信息提交成功</span>
                    </div>
                    <div>
                        预计3分钟之内会收到电话回复，请您留意！ 祝您生活愉快。
                    </div>
                </div>


                <!-- 全部门店列表 -->
                <div class="resBox resBox1" v-show="touFlag == 5">
                    <div class="resTop">
                        <div>
                            <span>店铺列表</span>
                            <div> <img src="../../assets/advMobile/shopDetail/shopName.png" alt="">共计店铺</div>
                            <span>{{ shopList.length }}家</span>
                        </div>
                        <div class="bottomBox">
                            <!-- <div class="itemBox">
                                <div>
                                    <van-icon class="tipIcon" color="#C20330" name="location" />
                                    已投放
                                </div>
                                <span>{{ shopAdvNum }}家</span>
                            </div>
                            <div class="itemBox">
                                <div>
                                    <van-icon class="tipIcon" color="#03C295" name="location" />
                                    未投放
                                </div>
                                <span>{{ shopUnAdvNum }}家</span>
                            </div>
                            <div class="itemBox">
                                <div>
                                    <van-icon class="tipIcon" color="#03C295" name="location" />
                                    已占用
                                </div>
                                <span>{{ shopUnAdvNum }}家</span>
                            </div> -->
                        </div>
                    </div>
                    <div class="myTabBox">
                        <div class="myTabTop">
                            <div>店铺名称</div>
                            <div>区域</div>
                            <div>位置</div>
                            <div>状态</div>
                            <div>操作</div>
                        </div>
                        <template v-if="shopList.length != 0">
                            <div class="myTabMain" v-for="( item, index ) in  shopList " :key="index">
                                <div>{{ index + 1 }}.{{ item.shopName }}</div>
                                <div>{{ item.shopRegion | getRegion }}</div>
                                <div>{{ item.shopAddr }}</div>
                                <div
                                    :class="item.shopStatus == 1 ? 'redNum' : item.shopStatus == 0 ? 'greenNum' : 'yellowNum'">
                                    {{ item.shopStatus == 1 ? '已投放' : item.shopStatus == 0 ? '未投放' :
                        '已占用'
                                    }}
                                </div>
                                <div @click="checkDetail(index, 'shopList', touFlag)">详情</div>
                            </div>
                        </template>
                        <div v-else class="emptyBox">
                            <img src="../../assets/empty.png" alt="">
                        </div>
                    </div>
                </div>


                <!-- 店铺详情 -->
                <div class="shopDetail" v-if="touFlag == 6">
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/shopName.png" alt="">
                            店铺名称
                        </div>
                        <div>{{ shopInfoDetail.shopName }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/tel.png" alt="">
                            第一印象
                        </div>
                        <div class="shopLable1">{{ shopInfoDetail.shopMainLabel || '暂未设置' }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/area.png" alt="">
                            所处区域
                        </div>
                        <div>{{ shopInfoDetail.shopRegion | getRegion }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/square.png" alt="">
                            店铺面积
                        </div>
                        <div>{{ shopInfoDetail.shopArea || '暂无信息' }}
                            <span v-if="shopInfoDetail.shopArea">
                                m<sup>2</sup>
                            </span>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/address.png" alt="">
                            店铺地址
                        </div>
                        <div>{{ shopInfoDetail.shopAddr || '暂无信息' }}</div>
                    </div>
                    <div class=" detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/xiaoFei.png" alt="">
                            消费档次
                        </div>
                        <div>{{ shopInfoDetail.shopLevelText }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/renshu.png" alt="">
                            日平均人数
                        </div>
                        <div>
                            <div>{{ shopInfoDetail.shopDayNum }}人</div>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/fenlei.png" alt="">
                            店铺桌数
                        </div>
                        <div>
                            <div>{{ shopInfoDetail.shopTables ? shopInfoDetail.shopTables + '桌' : "暂无信息" }}</div>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/xingZhi.png" alt="">
                            店铺性质
                        </div>
                        <div>
                            <div v-for=" (item, index) in shopInfoDetail.targetList" :key="index">{{ item }}
                            </div>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/status.png" alt="">
                            投放状态
                        </div>
                        <div
                            :class="shopInfoDetail.shopStatus == 1 ? 'redNum' : shopInfoDetail.shopStatus == 0 ? 'greenNum' : 'yellowNum'">
                            {{ shopInfoDetail.shopStatus == 1 ? '已投放' : shopInfoDetail.shopStatus == 0 ? '未投放' : '已占用'
                            }}
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/time.png" alt="">
                            投放时间
                        </div>
                        <div>{{ shopInfoDetail.startTime || '暂无数据' }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/resTime.png" alt="">
                            到期时间
                        </div>
                        <div>{{ shopInfoDetail.endTime || '暂无数据' }}</div>
                    </div>
                </div>



                <!-- 合作列表 -->
                <div class="shopDetail" v-if="touFlag == 7">
                    <van-notice-bar left-icon="volume-o" :scrollable="false" v-if="pastHeList.length != 0">
                        <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
                            <van-swipe-item v-for="(item, index) in pastHeList" :key="index">恭喜{{ item.userName
                                }}签约广告投放合同</van-swipe-item>
                        </van-swipe>
                    </van-notice-bar>
                    <div class="noticeTit">深度合作客户一览</div>
                    <div class="noticeListBox" v-if="heList.length != 0">
                        <div v-for="(item, index) in heList" :key="index">恭喜{{ item.userName }}签约广告投放合同</div>
                    </div>
                    <div v-else class="emptyBox">
                        <img src="../../assets/empty.png" alt="">
                    </div>
                </div>

                <div class="touBtnBox" v-if="touFlag != 3 && touFlag != 5 && touFlag != 6 && touFlag != 7">
                    <div v-if="touFlag == 0">
                        <div @click="resHandle('tou')">
                            <van-icon name="replay" />重置
                        </div>
                        <div @click="submitHandle('tou')">
                            <van-icon name="filter-o" />筛选
                        </div>
                    </div>
                    <div v-else-if="touFlag == 1">
                        <div @click="submitHandle('info')">
                            <van-icon name="description-o" />
                            提交投放信息
                        </div>
                        <div @click="resHandle('resTou')">
                            <van-icon name="filter-o" />再次筛选
                        </div>
                    </div>
                    <div v-else-if="touFlag == 2">
                        <div @click="submitHandle('submitInfo')" class="subBtn">
                            提交
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div :class="showCalendar ? 'calendarBox' : 'hidencalendarBox'">
            <div :class="showCalendar ? 'showCale' : 'hidenCale'">
                <van-icon name="cross" @click="closeCalendar" class="closeCaleIcon"></van-icon>
                <van-calendar color="#1989fa" title='投放时间' :min-date="minDate" :max-date="maxDate" type="range" round
                    :poppable="false" @confirm="onConfirm" />
            </div>
        </div>

    </div>
</template>

<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>

import { Loading } from 'element-ui';

import { listSHop, searchShop, addOrder,payOrder,listHcustomer } from '../../network/mobile'
import { conditionList, positionList } from '../../utils/conditionList'
import { listUserAdvShop } from '../../network/preparer'
import { getSaleUserOrder } from '../../network/auditing'

import {
	listSetting,
} from "../../network/pc";

import BScroll from "better-scroll"; //引入BScroll插件
export default {
    name: 'HomeR',
    data() {
        return {
            sheetDia: false,// 投放弹窗
            showShaiPop: false,// 筛选 条件
            demoList: [
                {
                    text: '已投放',
                    img: ''
                },
                {
                    text: '未投放',
                    img: ''
                },
                {
                    text: '已投放',
                    img: ''
                },
            ],
            conditionList: '',//筛选条件

            // 0 筛选  
            // 1 查看筛选项  
            // 2 提交投放表单 
            // 3 表单提交成功提示 
            // 5 查看门店信息
            // 6 店铺详情


            touFlag: 0,

            scrollY: 0, // 右侧滑动的时候距离顶部的值
            rightSide: [], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化)

            shopList: [],//门店列表
            showShopList: [],//展示的门店数据
            resNum: 0,// 剩余未展示条数
            shopOldList: [], // 门店原始数据  用于筛选数据

            positionList: positionList,//定位数据

            userInfo: {  // 投放广告填写表单
                openId: localStorage.openId,
                userId: '',
                userName: '',
                userTel: '',
                userMoney: '',
                content: '',
                startTime: '',
                endTime: '',
                timeStr: ''
            },
            shopRegion: 0,// 当前用户所在区域id
            showShopNum: 37,//首页默认展示门店数量

            shopInfoDetail: '',//店铺详情
            checkDetailtouFlag: -1,


            myTouShopList: [],//  我的投放门店列表
            showCalendar: false,//时间选择弹窗
            minDate: new Date(),
            maxDate: new Date(2030, 0, 31),

            shopAdvNum: 0, // 已投放店铺数
            shopUnAdvNum: 0,  // 未投放店铺数
            shopZhanAdvNum: 0,  // 已占用店铺数

            userTag: localStorage.userTag,//  -2 推广员  0 用户


            //  0 未投放   1  已投放  2 已占用  

            shopDetailFlag: 1,//  1  直接点击首页店铺查看  2 点击列表查看  



            deposit: '', // 定金金额
			earlyWarning: '', // 预警天属

            areaIds:'',//可选区域id



            heList:[],  // 正在合作列表
            pastHeList:[]  // 往期合作列表
            


        }
    },
    mounted() {
        this.setTitle()
        this.initializeRoll(); //滑动初始化方法
        this.initializeOwn(); //初始化rightSide方法
    },
    methods: {


        statusHandle(flag) {

            // 直接点击门店   或    查看更多门店
            if (flag == -1 || flag == -2) {
                this.shopList = this.shopOldList.filter(item => {
                    return item.shopStatus == 0
                })
                console.log(this.shopList);
                this.dataHandle(this.shopList)
                if (flag == -2) {
                    this.showHandle('shopList')
                }
            } else {
                this.shopList = this.shopOldList.filter(item => {
                    return item.shopStatus == flag
                })

                this.shopList.forEach((ele, index) => {
                    ele.shopTargetList = ele.shopTarget.split(',')
                    ele.targetList = []
                    ele.shopLevelText = ''
                    ele.shopTargetList.forEach((target) => {
                        conditionList[1].list.forEach(con => {
                            if (target == con.targetId) {
                                ele.targetList.push(con.text)
                            }
                        })
                    })

                    conditionList[2].list.forEach(level => {
                        if (ele.shopLevel == level.levelId) {
                            ele.shopLevelText = level.text
                        }
                    })
                    ele.shopLevel = Number(ele.shopLevel)
                })

                this.showHandle('shopList')
            }

            if (this.shopList.length == 0) {
                this.$message.warning('暂无门店')
            }

        },


        onConfirm(e) {
            console.log(e);
            console.log(this.getTime(e[0]));
            console.log(this.getTime(e[1]));

            this.userInfo.startTime = this.getTime(e[0])
            this.userInfo.endTime = this.getTime(e[1])

            this.userInfo.timeStr = this.userInfo.startTime + ' 至 ' + this.userInfo.endTime
            console.log(this.userInfo);
            this.$forceUpdate()
            this.closeCalendar()
        },

        closeCalendar() {
            this.showCalendar = false
        },



        // 查看店铺详情
        checkDetail(index, flag, touFlag) {

            if (flag == 'shop') {
                this.shopInfoDetail = this.showShopList[index]
                this.sheetDia = true
                this.touFlag = 6

                this.shopDetailFlag = 1



            } else {
                this.checkDetailtouFlag = touFlag
                if (flag == 'shopList') {
                    this.shopInfoDetail = this.shopList[index]
                } else if (flag == 'myShopList') {
                    this.shopInfoDetail = this.myTouShopList[index]
                }
                this.touFlag = 6

                this.shopDetailFlag = 2

            }


        },

        // 重置筛选项
        resHandle(flag) {
            // 重置筛选条件
            if (flag == 'resTou') {
                this.$nextTick(() => {
                    this.touFlag = 0
                })
            } else {
                this.conditionList.forEach(ele => {
                    ele.list.forEach(item => {
                        item.isSelect = false
                    })
                })
            }
        },


        // 筛选选择项目
        selectItem(index, eIndex, flag) {
            if (flag == 'shai') {
                this.conditionList[index].list[eIndex].isSelect = !this.conditionList[index].list[eIndex].isSelect
            } else if (flag == 'touNav') {  //投放左侧导航
                this.conditionList.forEach((t, tIndex) => {
                    t.isSelect = index == tIndex
                })
            } else if (flag == 'touList') {
                console.log(index, eIndex, flag);
                this.conditionList[index].list[eIndex].isSelect = !this.conditionList[index].list[eIndex].isSelect
            }
        },
        // 提交筛选条件
        submitHandle(flag) {
            // 筛选条件
            if (flag == 'shai' || flag == 'tou') {
                var arr = JSON.parse(JSON.stringify(this.conditionList)), resultList = [];
                arr.forEach(ele => {
                    ele.list = ele.list.filter(item => item.isSelect)
                })

                console.log(arr);

                this.getResult(arr, flag)
                if (flag == 'shai') {
                    this.showShaiPop = false
                }
            } else if (flag == 'info') {
                // 提交投放信息
                console.log('填写投放信息');

                if (this.shopUnAdvNum != 0) {
                    this.$confirm(`已为您筛选出${this.shopUnAdvNum}家尚未被投放广告的店铺`, '温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '重新筛选',
                        type: 'warning'
                    }).then(() => {
                        this.touFlag = 2
                        // this.getList()
                    }).catch(() => {

                    });
                } else {
                    this.$confirm('抱歉，当前筛选条件下暂无可投放门店，请重新筛选', '温馨提示', {
                        confirmButtonText: '重新筛选',
                        showCancelButton: false,
                        type: 'warning'
                    }).then(() => {
                        this.resHandle('resTou')
                    }).catch(() => {

                    });
                }


            } else if (flag == 'submitInfo') {

                // 提交表单信息
                if (this.userInfo.userName == '') {
                    this.$message.warning('请填写联系人')
                    return
                }
                if (this.userInfo.userTel == '') {
                    this.$message.warning('请填写电话')
                    return
                }
                if (!this.validator(this.userInfo.userTel)) {
                    this.$message.warning('请输入正确的电话')
                    return
                }
                if (this.userInfo.userMoney == '') {
                    this.$message.warning('请填写您的预算')
                    return
                }
                if (this.userInfo.timeStr == '') {
                    this.$message.warning('请选择投放日期')
                    return
                }
                if (this.userInfo.content == '') {
                    this.$message.warning('请填写投放广告简介')
                    return
                }

                console.log(this.userInfo);

                this.sendUserInfo()

            
            }
        },

        sendUserInfo() {
            var arr = this.shopList.filter(item => {
                return item.shopStatus ==0
            })

            var shopIds = '', obj = {
                userId: this.userInfo.userId,
                userName: this.userInfo.userName,
                openId: localStorage.openId,
                userTel: this.userInfo.userTel,
                promoterId: localStorage.saleManId,
                userBalance:0,
                userPut: {
                    userId: this.userInfo.userId,
                    putMoney: this.userInfo.userMoney,
                    putAdv: this.userInfo.content,
                    isPut: 1,
                    shopId: '',
                    startTime: this.userInfo.startTime,
                    endTime: this.userInfo.endTime,
                    shopTotal: this.shopList.length,
                    promoterId: localStorage.saleManId,
                }
            }


            console.log(arr);
            console.log(this.shopList);

            arr.forEach(ele => {
                shopIds += ele.shopId + ','
            })

            obj.userPut.shopId = shopIds

            console.log(obj);


            addOrder(obj).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.$message.success('信息提交成功')
                    if(localStorage.user==undefined){
                        localStorage.user = JSON.stringify(res.data.user)
                        localStorage.userId = res.data.user.userId
                    }
                    this.$confirm(`您还需支付${this.deposit}元?`, '提示', {
                        confirmButtonText: '立即支付',
                        cancelButtonText: '稍后支付',
                        type: 'warning'
                    }).then(() => {
                        this.payHandle(res.data.recordId)
                    }).catch(() => {
                        this.touFlag = 3
                        this.submitHandle('shai')
                        // this.getSaleShopData()
                    });
                } else {
                    this.$message.warning('信息提交失败，请重试')
                }
            })
        },

        // 支付定金
        payHandle(id){
            payOrder({
                recordId:id,
                payMoney:this.deposit,
                openId: localStorage.openId,
            }).then(res=>{
                if(res.flag){
                    this.onBridgeReady(res.data)
                }else{
                    this.$message.warning('支付失败，请稍后支付')
                }
            })
        },

        

        // 根据筛选条件获取符合的数据
        getResult(list, flag) {
            console.log(list);
            console.log(flag);
            var shopRegions = '', shopTarget = '', shopLevels = '',areaId='';
            list.forEach((item, index) => {
                console.log(item);
                if (item.list.length != 0) {
                    if (index == 0) {
                        item.list.forEach(ele => {
                            shopRegions += ele.regionId + ','
                        })
                    }
                    if (index == 1) {
                        item.list.forEach(ele => {
                            shopTarget += ele.targetId + ','
                        })
                    }
                    if (index == 2) {
                        item.list.forEach(ele => {
                            shopLevels += ele.levelId + ','
                        })
                    }
                }
            })

            console.log(shopRegions);
            console.log(shopTarget);
            console.log(shopLevels);


            shopRegions=shopRegions==''?this.areaIds:shopRegions

            searchShop({
                shopRegions,
                shopTarget,
                shopLevels,
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.shopOldList = JSON.parse(JSON.stringify(res.data.shops))

                    this.statusHandle(-1)


                    // this.dataHandle(res.data.shops)
                    if (flag == 'shai') {
                        // 筛选获取的数据
                        this.showShaiPop = false
                    } else if (flag == 'tou') {
                        // 点击投放筛选的数据
                        this.touFlag = 1
                    }
                } else {
                    this.$message.warning('筛选失败，请重试')
                }
            })
        },

        // 关闭投放弹窗
        popTou() {
            // 点击店铺·查看详情
            if (this.shopDetailFlag == 1) {
                this.sheetDia = false
            } else {
                if (this.touFlag == 6) {
                    this.touFlag = this.checkDetailtouFlag
                } else {
                    if (this.touFlag == 2 || this.touFlag == 3) {
                        this.touFlag = 1
                    } else {
                        this.sheetDia = false
                    }
                }
            }
        },
        // 关闭筛选弹窗
        popC() {
            this.showShaiPop = false
        },
        popN() {
        },
        // 显示筛选弹窗 和  投放弹窗
        showHandle(flag) {
            if (flag == 'shai') {
                this.showShaiPop = true
            } else if (flag == 'tou') {
                this.statusHandle(-1)
                this.touFlag = 1
                this.sheetDia = true
            } else if (flag == 'shopList') {
                this.touFlag = 5
                this.sheetDia = true
            }else if(flag=='he'){
                this.touFlag = 7
                this.sheetDia = true
            }
        },
        toPage() {
            this.$router.replace('/geren')
        },
        setTitle() {
            document.title = '首页'
            const i = document.createElement('iframe')
            i.src = '/favicon.ico'
            i.style.display = 'none'
            i.onload = function () {
                setTimeout(function () {
                    i.remove()
                }, 9)
            }
            document.body.appendChild(i)
        },

        // 校验函数返回 true 表示校验通过，false 表示不通过
        validator(val) {
            // 验证手机号 和座机号
            return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(val) || /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(val);
        },


        // 初始化滚动
        initializeRoll() {
            // new一个类的实例，前提必须确保父元素和子元素的内容已经正确渲染了，不然不会生效
            new BScroll(".leftBox", {
                click: true
            });
            // 组件实例上挂属性
            this.foodsScroll = new BScroll(".rightBox", {
                probeType: 2, // 因为惯性滑动不会触发
                click: true
            });

            // 给右侧列表绑定scroll监听
            this.foodsScroll.on("scroll", ({
                x,
                y
            }) => {
                this.scrollY = Math.abs(y);
            });
            // 给右侧列表绑定scroll结束的监听
            this.foodsScroll.on("scrollEnd", ({
                x,
                y
            }) => {
                console.log("操作结束的下标值" + x, y);
                this.scrollY = Math.abs(y);
            });
        },
        // 初始化rightSide
        initializeOwn() {
            // 初始化rightSide
            const rightSide = [];
            let top = 0;
            rightSide.push(top);
            // 找到所有分类下的li
            const lis = this.$refs.shopContant.getElementsByClassName("eventList"); //获取dom元素lii（eventList），对其进行操作
            // slice() 方法返回一个新的数组对象
            Array.prototype.slice.call(lis).forEach(li => {
                top += li.clientHeight; //相当于top = top + li.clientHeight
                rightSide.push(top);
            });
            //更新数据
            this.rightSide = rightSide;
        },
        //左侧点击事件
        onClickNav(index) {
            console.log(index);
            //拿到目标位置的scrollY，点击左侧导航，右侧列表滑动到对应的位置
            const scrollY = this.rightSide[index];
            // 点击的分类成为当前分类，索引当前选中的导航标题
            this.scrollY = scrollY;
            // 平滑滑动右侧列表
            this.foodsScroll.scrollTo(0, -scrollY, 1000);
        },


        // 获取某区域的门店列表

        getShopList() {

            listSHop({
                shopRegion: this.shopRegion
            }).then(res => {
                if (res.flag) {
                    console.log(res);

                    this.shopOldList = JSON.parse(JSON.stringify(res.data.shops))


                    this.statusHandle(-1)
                    // this.dataHandle(res.data.shops)
                }
            })
        },

        dataHandle(allShopList) {
            this.resNum = 0
            this.showShopList = []
            this.shopList = []


            this.shopAdvNum = 0
            this.shopUnAdvNum = 0
            this.shopZhanAdvNum = 0

            allShopList.forEach((ele, index) => {

                if (ele.shopStatus == 0) {
                    this.shopUnAdvNum++
                } else if (ele.shopStatus == 1) {
                    this.shopAdvNum++
                } else if (ele.shopStatus == 2) {
                    this.shopZhanAdvNum++
                }

                ele.shopTargetList = ele.shopTarget.split(',')
                ele.targetList = []
                ele.shopLevelText = ''
                ele.shopTargetList.forEach((target) => {
                    conditionList[1].list.forEach(con => {
                        if (target == con.targetId) {
                            ele.targetList.push(con.text)
                        }
                    })
                })

                conditionList[2].list.forEach(level => {
                    if (ele.shopLevel == level.levelId) {
                        ele.shopLevelText = level.text
                    }
                })
                ele.shopLevel = Number(ele.shopLevel)
                ele.top = this.positionList[index] ? this.positionList[index].top : 0
                ele.left = this.positionList[index] ? this.positionList[index].left : 0
            })


            if (allShopList.length > this.showShopNum) {
                this.resNum = allShopList.length - this.showShopNum
                this.showShopList = allShopList.slice(0, this.showShopNum)
            } else {
                this.showShopList = allShopList.slice(0, this.showShopNum)
            }

            this.shopList = [...allShopList]

            this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                loadingInstance.close();
            });


            console.log(this.shopAdvNum);
            console.log(this.shopUnAdvNum);



            console.log(this.showShopList);
            console.log(this.shopList);
            console.log(this.resNum);

        },
        textInputFocus() {
            judgeInput()
        },

        getTime: function (str) {
            var date = new Date(str)
            var year = date.getFullYear()
            var month = this.add0(date.getMonth() + 1)
            var day = this.add0(date.getDate())
            var hours = this.add0(date.getHours())
            var min = this.add0(date.getMinutes())
            var se = this.add0(date.getSeconds())
            // var str = year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + se
            var str = year + '-' + month + '-' + day
            return str
        },
        add0: function (m) {
            return m < 10 ? '0' + m : m
        },



        getSaleShopData() {
            listUserAdvShop({
                userId: localStorage.userTag == -2 ? localStorage.userId : localStorage.saleManId||40
            }).then(res => {
                if (res.flag) {
                    this.shopOldList = JSON.parse(JSON.stringify(res.data.shops))
                    res.data.area = Array.from(new Set(res.data.area))
                    var arr = [];
                    this.areaIds=''
                    this.conditionList[0].list.forEach(item => {
                        res.data.area.forEach(ele => {
                            if (item.regionId == ele) {
                                arr.push(item)
                                this.areaIds+=ele+','
                            }
                        })
                    })
                    this.conditionList[0].list = arr
                    this.statusHandle(-1)
                    console.log(this.areaIds);
                    console.log(arr);
                    console.log(res);
                    console.log(this.conditionList);
                }
            })
        },

        getSettingList() {
			listSetting().then(res => {
				console.log(res);
                this.deposit=res.data.deposit
                this.earlyWarning=res.data.earlyWarning
			});
		},

        beApartDays(Date_start, Date_end = new Date()) {
            // 时间格式化
            let date1 = new Date(Date_start);
            let date2 = new Date(Date_end);
            date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
            date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
            //目标时间减去当前时间
            const diff = date1.getTime() - date2.getTime();

            //计算当前时间与结束时间之间相差天数
            return diff / (24 * 60 * 60 * 1000);
        },

        getHeList(){
            getSaleUserOrder({
                promoterId: 0
            }).then(res => {
                if (res.flag) {
                     this.pastHeList=[]
                     this.heList=[]
                res.data.forEach(item=>{
                    if(item.isPut==1){
                        if(this.beApartDays(item.endTime)<0){
                            this.pastHeList.push(item)
                        }else{
                            this.heList.push(item)
                        }
                    }
                })

                console.log(this.pastHeList);
                console.log(this.heList);

                }
            })
        },

        
        wxPayHandle() {
            // 检测支付环境中的 WeixinJSBridge
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                this.onBridgeReady();
            }
        },

        onBridgeReady(data) {

        var that=this
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
            "appId": data.appId, //公众号名称，由商户传入
            "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
            "nonceStr": data.nonceStr, //随机串
            "package": data.package,
            "paySign": data.paySign, //微信签名
            "signType": data.signType //微信签名方式：
        },
            function (res) {
                // 支付成功
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    that.$message.success('支付成功')
                    that.touFlag = 3
                    that.submitHandle('shai')
                }
                // 支付过程中用户取消
                if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    that.$message.warning('您已取消支付')
                }
                // 支付失败
                if (res.err_msg == "get_brand_wcpay_request:fail") {
                    that.$message.warning('支付失败')
                }
                if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
                }
            });
        },

        // getHeList(){
        //     listHcustomer({
              
        //     }).then(res => {
        //         if (res.flag) {

        //              this.pastHeList=[]
        //              this.heList=[]
        //         res.data.userPut.forEach(item=>{
        //                 if(this.beApartDays(item.endTime)<0){
        //                     this.pastHeList.push(item)
        //                 }else{
        //                     this.heList.push(item)
        //                 }
                    
        //         })

        //         console.log(this.pastHeList);
        //         console.log(this.heList);

        //         }
        //     })
        // },
    },
    created() {
    
        this.conditionList = JSON.parse(JSON.stringify(conditionList))//筛选条件
        this.getSaleShopData()
        // 获取定金和预警时间设置
        this.getSettingList()
        // 获取合作列表
        this.getHeList()

        // 获取本地用户信息
        if (localStorage.user) {
            var user = JSON.parse(localStorage.user)
            this.userInfo.userId = user.userId
            this.userInfo.userName = user.userName
            this.userInfo.userTel = user.userTel
        }
    },
    //计算属性
    computed: {
        // 计算出当前分类的下标
        currentIndex() {
            const {
                scrollY,
                rightSide
            } = this; //拿到每次滑动的值以及每一个分类的下标值
            //findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
            //获取数组rightSide中每一个下标值并筛选条件返回第一个元素索引位置
            const index = rightSide.findIndex((top, index) => {
                // scrollY>=当前top && scrollY<下一个top
                return scrollY >= top && scrollY < rightSide[index + 1];
            });
            // 返回结果
            return index;
        }
    },
    filters: {
        getRegion(val) {
            var name = ''
            conditionList[0].list.forEach(item => {
                if (val == item.regionId) {
                    name = item.text
                }
            })
            return name
        }
    }

}

let loadingInstance = Loading.service();






// 判断手机 - ios/andriod
function isIOS() {
    const u = navigator.userAgent;
    return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
}

/**
  * @description: 键盘弹起，输入框被遮挡
  */
function judgeInput() {
    if (isIOS()) {
        window.addEventListener('focusin', function () {
            console.log(1 + document.activeElement.tagName);
            if (
                document.activeElement.tagName === 'INPUT' ||
                document.activeElement.tagName === 'TEXTAREA'
            ) {
                setTimeout(function () {
                    document.documentElement.scrollTop = document.body.scrollHeight;
                }, 20);
            }
        });
    } else {
        window.addEventListener('resize', function () {
            console.log(2 + document.activeElement.tagName);
            if (
                document.activeElement.tagName === 'INPUT' ||
                document.activeElement.tagName === 'TEXTAREA'
            ) {
                setTimeout(function () {
                    document.activeElement.scrollIntoView();
                }, 20);
            }
        });
    }
}

</script>

<style lang='less' scoped>
.pageCon {
    display: flex;
    flex-direction: column;
    width: 100%;
    // height: calc(100vh - 98px);
    height: 100vh;
    // background-color: #999;
    background-color: #EFF0F5;
    overflow: scroll;
}

.shopItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    // background-color: #E3EDFA;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #333333;
}

.posiIcon {
    font-size: 36px;
}

.demoIcon {
    font-size: 24px;
    margin-right: 10px;
}

.tipIcon {
    font-size: 32px;
    margin-right: 10px;
}

.shopItem>img {
    width: 38px;
    height: 44px;
    background-color: red;
}

.shopItem>div {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center
}


.shopItem>div>img {
    margin-left: 8px;
    width: 22px;
    height: 22px;
    background: linear-gradient(-30deg, #F7AC3C, #F6D453);
    border-radius: 50%
}

.showMapBox {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;
    // overflow-x: scroll;
}

.resTip {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 6px;
    width: 100%;
}

.resTip>div {
    font-size: 26px;
    color: #83abe4;
    text-align: center;
    padding: 10px 20px;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 30px;
    border: 2px solid #E6E7EB;
    background-color: aliceblue
}

.mapBox {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/advMobile/map.png);
    background-size: 100% 120%;
}

.mapBox::-webkit-scrollbar {
    display: none !important;
}

.pageBottomBox {
    width: 100%;
    height: auto
}

.shaiBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 60vh;
    right: 28px;
    width: 90px;
    height: 90px;
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 20px;
    border: 2px solid #E6E7EB;
    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    font-size: 57px;
    color: #4A8DE9;
}

.shaiBoxHe {
    top: calc(60vh - 120px);
}

.tipBtn {
    position: fixed;
    top: 200px;
    left: 28px;
}

.tipBtn>div {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 20px;
    border: 2px solid #E6E7EB;
    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    font-size: 57px;
}

.resBtnBox {
    top: 830px;
}

.navBox {
    // position: fixed;
    // bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750px;
    height: 98px;
    background: #FFFFFF;
    border-top: 2px solid #f2f2f2;
    z-index: 10;

}

.handleBox {
    // position: fixed;
    // bottom: 98px;
    padding-bottom: 14px;
    width: 750px;
    background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 9;
}

.touBtn {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 688px;
    height: 87px;
    // background: #FFFFFF;
    background-color: #EFF7FD;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 20px;
    border: 2px solid #E6E7EB;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 32px;
    color: #3C80DE;
}

.addIcon {
    position: relative;
    top: 2px;
    left: 4px;
}

.demoBox {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    width: 100%;
    width: auto;
    height: 50px;
    padding: 0 14px 0 52px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    overflow-x: scroll;
}

.demoBox::-webkit-scrollbar {
    display: none;
}

.demoItem {
    display: inline-block;
    margin-right: 40px;
    display: flex;
    align-items: center;
}

.demoItem>img {
    margin-right: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.navBox>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 22px;
    color: #9A9A9A;
}

.navBox>div>img {
    margin-bottom: 4px;
    width: 42px;
    height: 38px;
}

.navBox>div:last-child>img {
    margin-bottom: 4px;
    width: 36px;
    height: 42px;
}

.navBox>div:first-child {
    color: #333;
}

.hidenBox {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 100vh;
    background-color: #3C80DE;
    background-color: rgba(0, 0, 0, .3);
    z-index: 40;
    overflow: hidden;
    // transition: width 0.1s;
}

.showBox {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #3C80DE;
    background-color: rgba(0, 0, 0, .3);
    z-index: 40;
    // transition: width 0.1s;
}

.hidenBox>div {
    width: 0px;
    transition: width 0.1s;
}

.showBox>div {
    width: 630px;
    transition: width 0.1s;
}


.shaiPop {
    position: absolute;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    padding: 50px 30px 130px 0px;
    overflow-y: scroll;
    height: calc(100vh - 72px);
    background: #FFFFFF;
    border-radius: 20px 0px 0px 20px;

    z-index: 50;

}

.selectBox {
    width: 100%;
}

.selectBox>span {
    margin: 0 0 30px 40px;
    display: inline-block;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
}

.selectBox>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
}

.selectBox>div>span {
    display: inline-block;
    margin: 0 0px 24px 40px;
    padding: 16px 24px;
    background: #F2F2F2;
    border-radius: 8px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    border: 2px solid transparent;
}

.selectItem {
    background: #E3EDFA !important;
    border: 2px solid #3C80DE !important;
    color: #3C80DE !important;
}

.selectBtn {
    position: fixed;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 630px;
    height: 130px;
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 0px 0px 0px 20px;
}

.selectBtn>div {
    width: 560px;
    height: 86px;
    line-height: 86px;
    text-align: center;
    background: #3C80DE;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 20px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 32px;
    color: #FFFFFF;
}

.resBtn {
    position: absolute;
    top: 48px;
    right: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #999999;
}



.touBox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #3C80DE;
    background-color: rgba(0, 0, 0, .3);
    z-index: 40;
    overflow: hidden;
}

.hidenTouBox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100vw;
    height: 0px;
    // background-color: #3C80DE;
    // background-color: rgba(0, 0, 0, .3);
    z-index: 40;
    overflow: hidden;
    transition: height .2s;
}

.touBox>div {
    height: calc(100vh - 486px);
    transition: height .2s;
}

.hidenTouBox>div {
    height: 0px;
    transition: height .2s;
}

.touCon {
    position: absolute;
    bottom: 0px;
    width: 750px;
    height: calc(100vh - 486px);
    background: #FFFFFF;
    border-radius: 30px 30px 0px 0px;
    transition: height .2s;
}

.resultCon {
    height: calc(100vh - 242px) !important;
}

.touTop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 32px;
    color: #000000;
}

.closeIcon {
    position: absolute;
    top: 40px;
    right: 38px;

}

.closeCaleIcon {
    position: absolute;
    top: 26px;
    right: 38px;
    font-size: 32px
}

.touBtnBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0px;
    width: 750px;
    height: 130px;
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 0px 0px 0px 20px;
    z-index: 20;


}

.touBtnBox>div {
    box-sizing: border-box;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 690px;
    height: 86px;
    background: #3C80DE;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 20px;
}

.touBtnBox>div>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 32px;
    color: #FFFFFF;
}

.touBtnBox>div>div:first-child {
    width: 341px;
    height: 78px;
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 20px 60px 2px 20px;
    color: #3C80DE;
}

.touConBox {
    display: flex;
    width: 100%;
    height: calc(100% - 240px);
    // background-color: #E3EDFA;
    overflow-y: scroll;
}

.leftBox {
    width: 154px;
    height: 100%;
    background: #F2F2F2;
}

.rightBox {
    width: calc(100% - 154px);
    height: 100%;
    overflow-y: scroll;
}

.leftBox>div {
    box-sizing: border-box;
    padding: 20px 14px 20px 28px;
    width: 100%;
    // height: 66px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.activeNav {
    background-color: #fff !important;
    color: #3C80DE !important;
}

.resBox {
    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    padding: 0 30px 10px;
    width: 100%;
    height: calc(100% - 240px);
    overflow-y: scroll;
}

.resBox1 {
    height: calc(100% - 134px) !important;
}

.resTop {
    width: 690px;
    background: #FAFAFA;
    border-radius: 20px 20px 0px 0px;
}

.resTop>div:first-child {
    box-sizing: border-box;
    padding: 40px 0 28px 40px;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 2px solid rgba(153, 153, 153, .07);
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.resTop>div:first-child>div {
    display: flex;
    align-items: center;
    margin: 30px 0px 20px;
}

.resTop>div:first-child>div>img {
    margin-right: 12px;
    width: 26px;
    height: 26px;
}

.resTop>div:first-child>span:last-child {
    font-size: 36px !important;
    font-weight: bold !important;
}

.bottomBox {
    box-sizing: border-box;
    padding: 28px 28px 32px 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.itemBox {
    margin-bottom: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: 32px;
    color: #c20330;
}

.itemBox>div {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 28px !important;
}


.bottomBox>.itemBox:nth-child(2) {
    color: #70a06a;
}


.bottomBox>.itemBox:nth-child(3) {
    color: #F6C349;
}


.successBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 110px);
    background-color: #fff;
    overflow-y: scroll;
}

.successBox>div:first-child {
    padding: 126px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 32px;
    color: #333333;

    border-bottom: 6px dashed #ededed;
}

.successBox>div:first-child>img {
    margin-bottom: 20px;
    width: 240px;
    height: 144px;
}

.successBox>div:last-child {
    box-sizing: border-box;
    padding: 0 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    flex: 1;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 30px;
    color: #999999;
}


.subBtn {
    background-color: transparent !important;
    color: #fff !important;
}

.infoBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 240px);
    background-color: #fafafa;
    overflow-y: scroll;
}



.infoTop {
    box-sizing: border-box;
    padding: 36px 50px 14px;
    width: 100%;
    // height: 550px;
    background: #FFFFFF;
    border-radius: 0 0 30px 30px;
}

.infoTop>div:first-child {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
}

.infoTop>div:first-child::after,
.infoTop>div:first-child::before {
    margin: 0 42px;
    content: '';
    width: 14px;
    height: 4px;
    background: #3D80DD;
    border-radius: 2px;
}

.infoTop>div:not(:first-child) {
    width: 100%;
    height: 106px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #f2f2f2;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.infoTop>div:not(:first-child)>div>img {
    margin-right: 16px;
    width: 26px;
    height: 27px;
}

.infoTop>div>input {
    width: 60%;
    text-align: right;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 26px;
    color: #666666;
    border: none;
}

.infoTop>div>input::-webkit-input-placeholder {
    font-size: 26px;
    color: #CCCCCC;
}

.infoTop>div:last-child {
    border-bottom: none;
}

.advCon {
    margin-top: 32px;
    padding: 40px 64px;
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    border-radius: 30px 30px 0 0;
    background-color: #fff;
}

.advCon>div {
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.advCon>div>img {
    margin-right: 12px;
    width: 35px;
    height: 35px;
}

.advCon>textarea {
    box-sizing: border-box;
    padding: 30px 40px;
    margin-top: 26px;
    width: 622px;
    height: 288px;
    // height: 400px;
    background: #FAFAFA;
    border-radius: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #666;
    border: none;
}

.advCon>textarea::-webkit-input-placeholder {
    color: #ccc;
}

.myTabBox {
    position: relative;
    margin-top: 30px;
    box-sizing: border-box;
    width: 100%;
    // height: 893px;
    flex: 1;
    border-radius: 20px;
    border: 2px solid #FAFAFA;
    overflow-y: scroll;
    z-index: 40;
}

.myTabBox>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30px;
}

.myTabTop {
    position: sticky;
    top: -2px;
    width: 100%;
    height: 72px;
    background: #FAFAFA;
    border-radius: 20px 20px 0px 0px;
    font-weight: 400;
    font-size: 28px;
    color: #999999;
}


.myTabTop>div:first-child,
.myTabMain>div:first-child {
    width: 170px;
}

.myTabTop>div:nth-child(2),
.myTabMain>div:nth-child(2) {
    width: 110px;
}

.myTabTop>div:nth-child(3),
.myTabMain>div:nth-child(3) {
    width: 138px;
}

.myTabTop>div:nth-child(4),
.myTabMain>div:nth-child(4) {
    width: 112px;
    text-align: right;
}

.myTabTop>div:nth-child(5),
.myTabMain>div:nth-child(5) {
    text-align: right;
    width: 60px;
}

.myTabMain>div {
    padding: 28px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 24px;
    color: #333333;
}

.myTabMain>div:not(:last-child) {
    border-bottom: 2px solid #fafafa;
}

.myTabMain>div:nth-child(3) {
    width: 158px;
}

.myTabMain>div:nth-child(5) {
    color: #3C80DE !important;
}

.myTabMain>div:nth-child(4) {
    width: 80px;
    text-align: right;
    color: #70A06A;
}

.redNum {
    color: #C20330 !important;
}

.greenNum {
    color: #03C295 !important;
}

.yellowNum {
    color: #F6C349 !important;
}

.shopDetail {
    box-sizing: border-box;
    padding: 0 30px;
    width: 100%;
    height: calc(100% - 110px);
    overflow-y: scroll;
    // background-color: #3C80DE
}

.detailItem {
    display: flex;
    align-items: center;
    padding: 40px 0px;
    width: 100%;

}

.detailItem>div:first-child {
    display: flex;
    align-items: center;
    width: 246px;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.detailItem>div:first-child>img {
    margin-right: 22px;
    width: 38px;
    height: 38px;
}

.detailItem>div:last-child {
    position: relative;
    flex: 1;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.detailItem>div:last-child>span {
    position: absolute;
    right: 0px;
    font-weight: 400;
    font-size: 30px;
    color: #CCCCCC;
}

.detailItem:not(:last-child) {
    border-bottom: 2px solid rgba(153, 153, 153, .07);
}

.calendarBox {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 100vh;
    z-index: 50;
    background-color: rgba(0, 0, 0, .3);
}

.hidencalendarBox {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 0vh;
    z-index: 50;
    // background-color: rgba(0, 0, 0, .3);
    transition: height .3s;
}

.showCale {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 90%;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    transition: height .3s;
}

.hidenCale {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 0%;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    transition: height .3s;
}







.shaiTabBox {
    position: relative;
    margin-top: 30px;
    box-sizing: border-box;
    width: 100%;
    // height: 893px;
    flex: 1;
    border-radius: 20px;
    border: 2px solid #FAFAFA;
    overflow-y: scroll;
    z-index: 40;
}

.shaiTabBox>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30px;
}

.shaiTabTop {
    position: sticky;
    top: -2px;
    width: 100%;
    height: 72px;
    background: #FAFAFA;
    border-radius: 20px 20px 0px 0px;
    font-weight: 400;
    font-size: 28px;
    color: #999999;
}


.shaiTabTop>div:first-child,
.shaiTabMain>div:first-child {
    width: 56px;
}

.shaiTabTop>div:nth-child(2),
.shaiTabMain>div:nth-child(2) {
    width: 166px;
}

.shaiTabTop>div:nth-child(3),
.shaiTabMain>div:nth-child(3) {
    width: 110px;
}

.shaiTabTop>div:nth-child(4),
.shaiTabMain>div:nth-child(4) {
    width: 166px;
}

.shaiTabTop>div:nth-child(5),
.shaiTabMain>div:nth-child(5) {
    text-align: right;
    width: 60px;
}

.shaiTabMain>div {
    padding: 28px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.shaiTabMain>div:not(:last-child) {
    border-bottom: 2px solid #fafafa;
}

.shaiTabMain>div:nth-child(5) {
    color: #3C80DE !important;
}

.emptyBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    // height: 100%;
    font-size: 28px;
}

.emptyBox>img {
    margin-top: 200px;
    width: 374px;
    height: 314px;
}

/deep/.van-notice-bar__content.van-ellipsis {
    height: 30px;
    line-height: 40px;
}

/deep/.van-swipe-item {
    // height: 100% !important;
    // display: flex !important;
    // align-items: center !important;
    // background-color: #03C295 !important;
    // height: 60px !important;
}

.noticeTit {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 24px;
    font-size: 32px;
    color: #333;
    font-weight: bold
}

.noticeListBox {
    box-sizing: border-box;
    padding: 0 30px;
    width: 100%;
}

.noticeListBox>div {
    padding: 24px 0;
    width: 100%;
    border-bottom: 2px solid #f2f2f2;
    font-size: 28px;
    color: #333
}

.shopLable {
    color: #ff7a21;
    font-size: 18px;
}

.shopLable1 {
    color: #ff7a21 !important;
}
</style>